<template>
    <div id="box1">
        <p id="p">登录</p>
        <div class="inp">
            <input 
                type="text" 
                placeholder="邮箱"
                v-model="data.email"
                @input="emailInput"
            >
            <span class="fa fa-envelope user a"></span>
        </div>
        <div class="inp">
            <input 
                type="password" 
                placeholder="密码"
                @input="pswInput"
                v-model="data.psw"
            >
            <span class="fa fa-lock a "></span>
        </div>
        <button id="btn" @click="btnClick" :disabled="!nums">登 录</button>
        <div id="mima">
            <router-link to="/new/password">忘记密码？</router-link>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
    data:function(){
        return {
            data:{
                email:"",
                psw:"",
            },
            arr:[false,false],
            nums:false,            
        }
    },
    computed:{
        ...mapState([
            "isLogin",
        ])
    },
    methods:{
        emailInput(){
            var reg = /^\w{1,}@\w{1,}\.\w{1,}$/;
            this.arr[0]=reg.test(this.data.email);
            this.aaa();
            this.data.psw="";
        },
        pswInput(){
            this.arr[1]=this.data.psw.length>0;
            this.aaa();
        },
        btnClick(){
            var data = {
                email:this.data.email,
                psw:this.data.psw
            }
            this.http.post('/users/login',data)
            .then(res=>{
                if(!res.data.err){
                    this.$store.dispatch("isLogin2");
                    history.back();
                }else{
                    this.$vux.alert.show({
                        title:"登录失败",
                        content:res.data.msg
                    });
                    this.data.psw = "";
                }
            })
        },
        aaa(){
            this.nums = this.arr.every(a=>{
                return a;
            })
        },
        bbb(){
            this.http.get("/users/isLogin")
            .then(res=>{
                if(!res.data.err){
                    window.location.href = "http://localhost:8080";
                }
            })
        },
    },
    activated:function(){
        this.bbb();
        
    }
}
</script>

<style scoped>
#box1{
    padding: 20px;
}
#p{
    font-size: 26px;
    margin-top: 0;
}
.inp{
    margin: 4px;
    margin-bottom: 10px;
    position: relative;
    border: solid 1px #999;
    border-radius: 3px;
    padding: 1px 8px;
    padding-left: 40px;
    
}
.inp input{
    outline:none;
    width: 100%;
    height: 32px;
    border: none;
    font-size: 14px;
}
.inp:hover{
    border: solid 1px #2D93E8;
    /*color: black !important;*/
}
.a{
    position: absolute;
    top: 8px;
    left: 12px;
    color: #777;
}
.user{
    left: 10px;
}


#mima{
    text-align: right;
    margin: 8px;
}
#mima button{
    border: none;
    padding: 2px 8px;
    background-color: white;
    text-decoration: underline;
}
</style>